<template>
    <div v-loading="loading">
      <el-button type="primary" @click="handlleAddTeacher">添加教师</el-button>
      <el-button type="primary" @click="getAllTeachers">刷新</el-button>
      <!--main-->
      <el-table :data="teachers" style="width: 100%; margin-top: 10px;" stripe :border="true">
        <el-table-column prop="uid" label="用户号" width="auto"></el-table-column>
        <el-table-column prop="name" label="姓名" width="auto"></el-table-column>
        <el-table-column prop="gender" label="性别" width="auto"></el-table-column>
        <el-table-column prop="birthdate" label="出生日期" width="auto"></el-table-column>
        <el-table-column prop="department" label="部门" width="auto"></el-table-column>
        <el-table-column prop="school" label="学院" width="auto"></el-table-column>
        <el-table-column prop="title" label="职称" width="auto"></el-table-column>
        <!-- <el-table-column prop="phone" label="手机" width="auto"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="auto"></el-table-column>
        <el-table-column prop="address" label="地址" width="auto"></el-table-column> -->
        <el-table-column label="操作" width="auto">
          <template #default="scope">
            <el-button type="primary" @click="showTeacherDetailInfo(scope.row)">详细信息</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      
    </div>
  
    
    <!--添加教师-->
    <el-dialog v-model="dialogAddTeacherVisible" title="添加教师">
      <el-form ref="formRef" :model="addTeacherInfo" label-width="120px" :rules="rolesAddTeacher" @submit.prevent="addTeacher" hide-required-asterisk>
        <el-form-item label="账号" prop="p_username">
          <el-input v-model="addTeacherInfo.p_username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="p_password">
          <el-input v-model="addTeacherInfo.p_password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="p_name">
          <el-input v-model="addTeacherInfo.p_name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="p_gender">
          <el-select v-model="addTeacherInfo.p_gender">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="p_birthdate">
          <el-date-picker v-model="addTeacherInfo.p_birthdate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"></el-date-picker>
        </el-form-item>

        <el-form-item label="部门" prop="p_department_id">
          <el-select v-model="addTeacherInfo.p_department_id">
            <el-option
              v-for="(department, index) in departmentsOptions"
              :key="index"
              :value="department.department_id"
              :label="department.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="p_school_id">
          <el-select v-model="addTeacherInfo.p_school_id">
            <el-option
              v-for="(school, index) in schoolOptions"
              :key="index"
              :value="school.school_id"
              :label="school.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称" prop="p_title_id">
          <el-select v-model="addTeacherInfo.p_title_id">
            <el-option
              v-for="(school, index) in teacherTitleOptions"
              :key="index"
              :value="school.title_id"
              :label="school.name"
            ></el-option>
          </el-select>
        </el-form-item>


      </el-form>
  
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogAddTeacherVisible = false">取消</el-button>
          <el-button type="primary" @click="addTeacher" native-type="submit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  
    <!--教师详细信息-->
    <el-drawer v-model="drawerTeacherDetail" title="详细信息" :with-header="true">
      <el-form label-width="60px"> 
          <el-form-item label="电话">{{ currentTeacher.phone }}</el-form-item>
          <el-form-item label="邮箱">{{ currentTeacher.email }}</el-form-item>
          <el-form-item label="地址">{{ currentTeacher.address }}</el-form-item>
      </el-form>
    </el-drawer>
  
    
  </template>
  
  <script setup>
  import http from '@/utils/axios.js'
  import { reactive, ref, onMounted, computed } from 'vue'
  import { ElMessage } from 'element-plus'
  
  
  const loading = ref(true)
  
  
  // 从后端get初始化数据
  const teachers = reactive([]);
  onMounted(() => {
    try {
    // 获取我的教师列表
      getAllTeachers()
    // 获取添加教师表单中的选项
      http.get('/api/school')
      .then(res => {
        Object.assign(schoolOptions, res.data);
        // console.log(schoolOptions);
      })
      http.get('/api/departments')
      .then(res => {
        Object.assign(departmentsOptions, res.data);
        // console.log(departmentsOptions);
      })
      http.get('/api/teacher_title')
      .then(res => {
        Object.assign(teacherTitleOptions, res.data);
        // console.log(teacherTitleOptions);
      })
    } catch (error) {
      console.error('Error fetching teacher home info:', error);
    }
    
  })
  
  const getAllTeachers = () => {
    // 获取所有教师信息
    http.get('/api/teacher/all_teachers')
      .then(res => {
        console.log(res);
        Object.assign(teachers, res.data);
        loading.value = false
      })
  }
  
  // 基本操作
  //添加教师
  // 添加教师的表单设置
  const addTeacherInfo = reactive({ });
  const dialogAddTeacherVisible = ref(false)
  const handlleAddTeacher = () => {
    dialogAddTeacherVisible.value = true
    
  }
  
  const formRef = ref(null)
  const rolesAddTeacher = ref({
    p_username: [{ required: true, message: '请输入账号', trigger: ['submit', 'blur'] }],
    p_password: [{ required: true, message: '请输入密码', trigger: ['submit', 'blur'] }],
    p_name: [{ required: true, message: '请输入姓名', trigger: ['submit', 'blur'] }],
    p_gender: [{ required: true, message: '请选择性别', trigger: ['submit', 'change'] }],
    p_birthdate: [{ required: true, message: '请选择出生日期', trigger: ['submit', 'change'] }],
    p_department_id: [{ required: true, message: '请选择部门', trigger: ['submit', 'change'] }],
    p_school_id: [{ required: true, message: '请选择学院', trigger: ['submit', 'change'] }],
    p_title_id: [{ required: true, message: '请选择学院', trigger: ['submit', 'change'] }]
  })
  

  const schoolOptions = reactive([]);  // 添加教师表单中options的设置
  const departmentsOptions = reactive([]);  // 添加教师表单中options的设置
  const teacherTitleOptions = reactive([]); // 添加教师表单中options的设置


  
  const addTeacher = async () => {
  
    formRef.value.validate(async (valid) => {
      if (valid) {
        // 表单验证通过,可以进行提交操作
        console.log(addTeacherInfo);
        await http.post('/api/add_teacher', addTeacherInfo)
        .then(res => {
          res = res.data
          if (res.code === 3000) {
            ElMessage.success('注册成功');
            dialogAddTeacherVisible.value = false;
            getAllTeachers()
          } else if (res.code===3001) {
            ElMessage.error('注册失败：'+res.data.error_msg)
            
          }
          console.log(res.data);
          
        })
        .catch(error => {
          console.error('Error fetching teacher home info:', error);
          // 在这里添加错误处理逻辑,例如显示错误消息给用户
        });
        console.log('Form submitted successfully')
      } else {
        // 表单验证失败,可以进行错误提示
        console.log('Form validation failed')
      }})
  }
  
  
  // 教师详细信息
  const currentTeacher = ref({})
  const drawerTeacherDetail = ref(false)
  const showTeacherDetailInfo = (teacher) => {
    currentTeacher.value = { ...teacher };
    drawerTeacherDetail.value = true
  }
  
  
  </script>